﻿<common:LayoutAwarePage
    x:Class="RK.Store.MetroSnake.UI.GamePausePage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:common="using:RK.Store.MetroSnake.Common"
    xmlns:local="using:RK.Store.MetroSnake.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    Name="GamePauseControlInstance">
    <Page.Resources>
        <Storyboard x:Name="FadeOutAnimation">
            <DoubleAnimation
                Storyboard.TargetName="GamePauseControlInstance"
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="00:00:00.300" />
        </Storyboard>
        <Storyboard x:Name="FadeInAnimation">
            <DoubleAnimation
                Storyboard.TargetName="GamePauseControlInstance"
                Storyboard.TargetProperty="Opacity"
                From="0.0" To="1.0" Duration="00:00:00.300" />
        </Storyboard>
    </Page.Resources>

    <!-- Fly in animation -->
    <Page.Transitions>
        <TransitionCollection>
            <RepositionThemeTransition />
            <EntranceThemeTransition />
        </TransitionCollection>
    </Page.Transitions>

    <Grid Style="{StaticResource LayoutRootStyle}"
          Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="120" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <!-- The background of this page -->
        <Rectangle
                Grid.RowSpan="2" Grid.ColumnSpan="2">
            <Rectangle.Fill>
                <LinearGradientBrush StartPoint="0,0" EndPoint="0,1">
                    <GradientStop Offset="0" Color="#88CFCFCF" />
                    <GradientStop Offset="1" Color="#886B6B6B" />
                </LinearGradientBrush>
            </Rectangle.Fill>
        </Rectangle>
        <Rectangle
                Grid.RowSpan="1" Grid.ColumnSpan="2"
                Fill="#00CBFF" />

        <!-- Back button and page title -->
        <Grid Grid.ColumnSpan="2">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="120" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton" Foreground="White" Click="OnCmdMainClick" IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}" Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle" Foreground="White" Grid.Column="1" Text="{StaticResource AppName}" Style="{StaticResource PageHeaderTextStyle}" />
            <TextBlock x:Uid="PauseSubtitle" Grid.Column="1" Text="Pause" Style="{StaticResource SubheaderTextStyle}" />
        </Grid>

        <Border VerticalAlignment="Center" HorizontalAlignment="Center"
                Grid.Column="0" Grid.ColumnSpan="2" Grid.Row="1">
            <Button Click="OnCmdMainClick" Background="#CC4F4F4F"
                    BorderBrush="Transparent">
                <Grid Width="600" Height="200">
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="200" />
                        <ColumnDefinition Width="*" />
                    </Grid.ColumnDefinitions>
                    <Grid.RowDefinitions>
                        <RowDefinition />
                    </Grid.RowDefinitions>

                    <Image Source="../Assets/Images/Snake_Pause.png"
                       Margin="10"
                       Grid.Column="0" />
                    <StackPanel Grid.Column="1" Margin="10">
                        <TextBlock x:Uid="PauseScreenTitle" Text="Pause!"
                                   FontFamily="Segoe UI Light"
                                   FontSize="42" TextWrapping="Wrap" />
                        <TextBlock x:Uid="PauseScreenDetail" Text="Tap here to return to the game"
                                   FontFamily="Segoe UI Light"
                                   FontSize="20" TextWrapping="Wrap" />
                    </StackPanel>
                </Grid>
            </Button>
        </Border>
    </Grid>
</common:LayoutAwarePage>